import React, { Component } from 'react'

export default class TabA extends Component {
  //组件内部数据
  state = {
    username: "小王",
    address: ["成都", "南京", "重庆"],
    user: { id: 1, name: "小吴" },
    age: 20,
    flag: "true"
  }
  changeUsername = () => {
    
  }
  render() {
    console.log("render");
    const { username, address, user, age, flag } = this.state
    return (
      <div>
        <h2>TabA</h2>
        <p>{username}</p>
        <p>{address}</p>
        {/* JSX 不支持渲染对象，支持渲染数组 */}
        <p>user:{user.id}---{user.name}</p>
        <p>{age}</p>
        <p>{flag}</p>
        {/* 事件绑定，并不是onclick原生事件绑定 JSX封装过后事件 */}
        <button onClick={this.changeUsername}>修改username</button>
      </div>
    )
  }
}
